<template>
  <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="`印鉴密钥详情`" :autoBack="true" leftIconColor="#333"
    :bgColor="'rgba(0,0,0,0)'" :titleStyle="{ color: '#fff', fontSize: '32rpx' }" :leftClick:="refreshlist">

    <view class="container"
      :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/staff_project_arrange.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">

      <!-- 表单盒子 -->
      <view class="form_box area">
        <scroll-view scroll-y class="comprehensive" v-if="list" :style="page ==  'approval' && level == userInfo.id && recyclestate== 0 || recyclestate== 3? 'height:73vh' :'height:82vh'">
          <view class="recruit_wrap">
            <view class="header">
              <up-avatar :src="`${baseUrl}` + list.user.avatar" shape="circle" size="60"></up-avatar>
              <view class="header_cont">
                <view class="title">{{ list.user.nickname }}提交的申请</view>
                <view class="times">{{ formatDatetime(list.createtime) }}<text class="hint">提交</text></view>
              </view>
            </view>
            <view class="detial_list">
              <view class="item">
                <view class="titles">申请类型: </view>
                <view class="list_right">{{ state.type[Number(list.type-1)] }}</view>
              </view>
              <view class="item item_special" v-if="list.images">
                <view class="titles">图片：</view>
                <view class="item_special_img">
                  <up-album :urls="images" class="images"></up-album>
                  <!-- <image v-for="i in images" :src="`${baseUrl}` + i" mode="scaleToFill" :key="i"/> -->
                </view>
              </view>
              <view class="item item_special">
                <view class="titles">申请理由：</view>
                <view class="item_special_cont">
             
                  <up-parse :content="list.content"></up-parse>
                </view>
              </view>
            </view>
            <!-- 流程图  当员工时候不显示，审核人是老板时候显示-->
            <s-review-state :stepList="stepList" :dates="dates"></s-review-state>
          </view>
         
        </scroll-view>
      </view>

    </view>

  </s-layout>
  <!-- 拒绝理由 -->
  <s-reasons-comfirm :show="showRefuse" 
            @cancel="reasonsCancel"
             @affirm="reasonsConfirm" ></s-reasons-comfirm>
  <!-- 底部提交按钮 -->
   <view v-if="page ==  'approval' ">
    <view v-if="level == userInfo.id">
      <view class="edit_button" v-if="recyclestate== 0 || recyclestate== 3"> 
        <!-- 0是待审 3是审批中  1 是回收 -->
        <button class="del" @tap="refuse(list.id)">拒绝</button>
        <button class="edit" @tap="submit(list.id)">同意</button>
      </view>
      <view class="edit_button" v-if="recyclestate== 1">
        <button class="edit" @tap="recycle(list.id)">回收</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import sheep from '@/sheep';
import { ref, reactive, unref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { baseUrl } from "@/sheep/config";
const { safeAreaInsets } = uni.getSystemInfoSync();
const userInfo = sheep.$store('user').userInfo;
import {
  formatDatetime
} from '@/utils/fn.js';
import { isEmpty } from 'lodash';

const state = reactive({
  type: ['公章','营业执照','CA'],
})

const text = ref("提交");
const editid = ref('')
const is_template = ref(0)
const recyclestate = ref()
const level =  ref()
const page = ref()
onLoad((options) => {
  console.log(options)
 page.value = options.page
  editid.value = options.ids
  is_template.value = options.is_template
  if (!isEmpty(options.is_template)) {
    is_template.value = 1
  }
  getBorrowingView()



})
const stepList = ref([])
//请求数据
const list = ref()
const dates = ref(-1)
const images = ref([])
const getBorrowingView = async () => {
  let params = {
    ids: editid.value,
  }
  const res = await sheep.$api.common_seal.postCommonSealApplyView(params)
  list.value = res?.data
  level.value = res.data.level
  recyclestate.value = res.data.state
  images.value = res.data.images?.split(',').map(url => `${baseUrl}${url}`);
  stepList.value = res?.data.approval_process
  stepList.value.forEach((i) => {
    if (i.datetime) {
      dates.value++
    }
  })
}
//同意
const submit = async (e) => {
  uni.$u.throttle(() => {
    // #ifdef MP
    sheep.$platform.useProvider('wechat').subscribeMessage('apply_notice');
    // #endif
    let params = {
      ids: e,
      state: 3
    }
    sheep.$api.common_seal.getCommonSealApplyPass(params).then((res) => {
      sheep.$helper.toast(res.msg);
      setTimeout(function () {
        stepList.value = []
        list.value =''
        dates.value = -1
        getBorrowingView()
        if(is_template.value != 1) {
          sheep.$router.renewal()
        }
      }, 1000);
    });
  }, 1000);
};


// 拒绝
const showRefuse = ref(false)
const reasonsValue = ref()
const reasonsId = ref()
//拒绝弹窗
const refuse = (e) => {
  showRefuse.value = true
  reasonsId.value = e
}
//拒绝理由 确定 -->
const reasonsConfirm = (e) => {
  uni.$u.throttle(() => {
  // #ifdef MP
  sheep.$platform.useProvider('wechat').subscribeMessage('apply_result_notice');
  // #endif
  reasonsValue.value = e
  if (!reasonsValue.value) {
    sheep.$helper.toast('请输入拒绝理由');
    return;
  } else {
    let params = {
      ids: reasonsId.value,
      reasons: reasonsValue.value
    }
    sheep.$api.common_seal.postCommonSealApplyRefuse(params).then((res) => {
      sheep.$helper.toast(res.msg);
      setTimeout(function () {
        stepList.value = []
        list.value =''
        dates.value = -1
        showRefuse.value = false
      getBorrowingView()
      if(is_template.value != 1) {
        sheep.$router.renewal()
      }
      }, 1000);
    });
  }
}, 1000);
}


// 拒绝理由取消  
const reasonsCancel = (e) => {
  showRefuse.value = e
  reasonsValue.value = ''
}
//回收
const recycle = (e) => {
  // #ifdef MP
  sheep.$platform.useProvider('wechat').subscribeMessage('apply_result_notice');
  // #endif
 let params = {
   ids: e,
 }
  sheep.$api.common_seal.getCommonSealApplyRecycle(params).then((res) => {
   uni.showToast({
     title: res.msg,
     icon: 'none',
     duration: 1000
   })
   setTimeout(function () {
    stepList.value = []
      list.value =''
      dates.value = -1
      getBorrowingView()
      sheep.$router.renewal()
   }, 1000);
  })
}
</script>

<style scoped lang="scss">
@import '../compentns/public.scss';

.recruit_wrap {
  .header {
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #EFEFEF;
    padding-bottom: 30rpx;
    margin-bottom: 20rpx;

    image {
      width: 104rpx;
      height: 104rpx;
      border-radius: 50%;
    }

    .header_cont {
      display: flex;
      flex-direction: column;
      margin-left: 20rpx;
    }

    .title {
      font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: $uni-font-weight;
      font-size: 30rpx;
      margin-bottom: 10rpx;
    }

    .times {
      font-family: PingFangSC;
      color: #999999;
      font-weight: 500;
      font-size: $uni-font-size-sm;
    }
  }

  .detial_list {
    width: 100%;
    margin-bottom: 30rpx;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 90rpx;

      .titles {
        font-family: PingFangSC;
        color: #666666;
        font-weight: 500;
       font-size:$uni-font-size-26;
      }

      .list_right {
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: 500;
       font-size:$uni-font-size-26;
        text-align: right;
      }
    }

    .item_special {
      height: auto;
      flex-direction: column;
      align-items: flex-start;

      .titles {
        font-family: PingFangSC;
        color: #666666;
        font-weight: 500;
       font-size:$uni-font-size-26;
        height: 90rpx;
        line-height: 90rpx;
      }

      .item_special_cont {
        width: 96%;
        // height: 160rpx;
        background: #F9FAFF;
        border-radius: 16rpx;
        color: $uni-text-color;
        font-weight: 500;
       font-size:$uni-font-size-26;
        padding: 20rpx;
      }

      .item_special_img {
        display: flex;

        image {
          width: 118rpx;
          height: 118rpx;
          border-radius: 16rpx;
          background-color: #F4F6FA;
          margin-left: 10rpx;
        }
      }
    }
  }
}

//审核流程
.auditProcess {
  border-top: 1rpx solid #EFEFEF;

  .title {
    height: 90rpx;
    line-height: 90rpx;
    color: $uni-text-color;
    font-weight: $uni-font-weight;
    font-size: 34rpx;
    position: relative;
    margin-bottom: 20rpx;

    &::after {
      width: 92rpx;
      height: 14rpx;
      content: '';
      position: absolute;
      bottom: 23%;
      z-index: 9;
      left: 3%;
      border-radius: 10rpx;
      background-color: rgba(0, 56, 247, 0.5);
    }
  }

  .status {
    display: flex;
    justify-content: space-between;
    min-height: 140rpx;
    padding-left: 20rpx;

    .status_left {
      width: 70%;
      margin-left: 20rpx;

      .name {
        color: $uni-text-color;
        font-weight: 500;
       font-size:$uni-font-size-26;

        .position {
          color: #999999;
          font-weight: 500;
          font-size: 22rpx;
          margin-left: 10rpx;
        }
      }

      .date {
        font-family: PingFangSC;
        color: #999999;
        font-weight: 500;
        font-size: $uni-font-size-sm;
        margin-top: 10rpx;
      }
    }

    .status_right {
      .taster {
        border: none;
        width: 104rpx;
        height: 40rpx;
        font-family: PingFangSC;
        font-weight: 500;
        font-size: 22rpx;
        border-radius: 18rpx;
        line-height: 40rpx;
        padding: 0;

        &::after {
          border: none;
        }
      }

      .yellow {
        color: #F77704;
        background: #FEF3E6;
      }

      .green {
        color: #17A500;
        background: #EAFEE6;
      }

      .red {
        color: #FEE6E6;
        background: #FF0000;
      }
    }
  }
}

//  修改内容
.edit_button {
  height: 144rpx;
  width: 90%;
  padding: 0 5%;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 98;
  display: flex;
  align-items: center;

  .del {
    width: 316rpx;
    height: 90rpx;
    border-radius: 50rpx;
    border: 2rpx solid $uni-color-primary;
    color: $uni-color-primary;
    font-family: PingFangSC;
    color: $uni-color-primary;
    font-weight: $uni-font-weight;
    font-size: 34rpx;
  }

  .edit {
    margin-left: 20rpx;
    width: 316rpx;
    height: 90rpx;
    border-radius: 50rpx;
    font-family: PingFangSC;
    color: #FFFFFF;
    font-weight: $uni-font-weight;
    font-size: 34rpx;
    background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
  }
}

// 滚动
.comprehensive {
  background-color: rgba(0, 0, 0, 0);
}

.reasonspop {
  :deep(.u-textarea) {
    background-color: #F9FAFF;

    .u-textarea__field {
      height: 446rpx !important;
      padding: 10rpx;
    }
  }

  .reasonsTitle {
    height: 90rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC;
    color: $uni-text-color;
    font-weight: $uni-font-weight;
    font-size: 40rpx;
  }

  .reasonsForRefusal {
    height: 466rpx;
    background: #F9FAFF;
  }

  .btn {
    height: 120rpx;
    background: $uni-bg-color;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .button {
      height: 90rpx;
      width: 240rpx;
      border-radius: 50rpx;

      font-weight: $uni-font-weight;
      font-size: 34rpx;
    }

    .cancel {
      border: 1px solid $uni-color-primary;
      color: $uni-color-primary
    }

    .confirm {
      color: $uni-bg-color;
      background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
    }

  }
}
</style>